<template>
	<!-- 点餐确认 -->
	<view class="page themeBga">
			<view class="pd020 contentBox">
				<view class="themeMask flex alignCenter justifyCenter pd400 mt20 border12">A03桌-用餐人数 4 人</view>
				<view class="readBox fz24 themeMask mt20 border12">
					<view class="sumUp borderBtm flex justifyBetween">
						<view class="flex alignCenter fz28">
							<view class="flex">
								<view>已点菜品</view>
								<view class="red">*18</view>
							</view>
						</view>
						<view class="flex">
							<text class="fz28">合计：</text>
							<text class="red fz30 bold">￥999.99</text>
						</view>
					</view>
					<uv-read-more textIndent="0" show-height="450rpx" :toggle="true" closeText="展开">
						<view class="popContent flex justifyBetween mb20" v-for="(item, index) in 10" :key="index">
							<view class="flex alignCenter">
								<image class="border12 mr14" src=""
									style="width: 120rpx; height: 120rpx; background-color: #888"></image>
								<view class="flexColumn justifyBetween">
									<view class="fz28">蟹八方 肉蟹煲-鸡爪煲</view>
									<view class="fz24 darkgray" style="margin: 4rpx 0">中辣-不要葱-不要煲</view>
									<view class="blod red fz30">￥99.99</view>
								</view>
							</view>
							<view class="flexColumn alignEnd">
								<view class="mb10">用户昵称</view>
								<view>*2</view>
							</view>
						</view>
					</uv-read-more>
				</view>
				<!-- 订单信息 -->
				<view class="themeMask flexColumn mt20 border12 fz28" style="padding: 20rpx">
					<view class="borderBtm20 fz30">订单信息</view>
					<view class="flex justifyBetween alignCenter mb20">
						<view>订单编号</view>
						<view>145451523156456451</view>
					</view>
					<view class="flex justifyBetween alignCenter mb20">
						<view>下单时间</view>
						<view>2024-05-20 13:14</view>
					</view>
					<view class="flex justifyBetween alignCenter mb20">
						<view>支付状态</view>
						<view>待结算</view>
					</view>
					<view class="flex justifyBetween alignCenter">
						<view>订单备注</view>
						<view>无</view>
					</view>
				</view>
				<view class="red flexColumn">
					<view class="mt20 mb20">温馨提示</view>
					<view class="fz24">您可选择线上结算也可直接前往前台结算，前台结算完成后本单会自动变为已结算。</view>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="btmBtn themeMask flex justifyBetween">
				<view class="botmBtn btnHollow border12">取消预约</view>
				<view class="botmBtn btnSolid border12">联系商家</view>
			</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	// 状态 0-点餐确认 1-订单详情
	const state = ref(0);
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		.contentBox {
		  flex: 1;
		  height: 100%;
		  overflow: auto;
		}
		.btmBtn {
		  width: 100%;
		  padding: 40rpx 40rpx 60rpx 40rpx;
		}
	}

	// 已点菜品
	.readBox {
		padding: 20rpx;
	}

	// 步进器
	.minus {
		width: 44rpx;
		height: 44rpx;
		border: 1rpx solid #e6e6e6;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10rpx;
	}

	.plus {
		width: 44rpx;
		height: 44rpx;
		background-color: #75301e;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

</style>